ged
<template>
	<view class="edit">
		<view class="edit_box public_sty">
			<view class="edit_con" v-for="(item, i) in drugDeils" :key="i">
				<view class="edit_key">
					<text :class="i == 2 ? 'phone_sty' : i == 3 ? 'gender_sty' : ''">{{ item.lable }}</text>
				</view>
				<view class="uni_input">
					<uni-easyinput
						v-if="i !== 3"
						v-model="item.value"
						:placeholder="item.placehoder"
						:type="index == 1 ? 'idcard' : 'text'"
						:maxlength="index == 4 ? '11' : '-1'"
						placeholder-style="color:#C0C0C0;text-algin:right"
						@blur="inputCheck"
						@focus="focus(i)"
					/>
					<radio-group @change="radioChange" class="radio" v-else>
						<label v-for="(item, idx) in item.drugGender" :key="idx">
							<radio :value="item.value" :checked="item.checked" style="transform:scale(0.7)" />
							<text>{{ item.gender }}</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<button type="primary" class="edit_btn">
			<text v-if="status == 0">保存</text>
			<text v-else>确认修改</text>
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 0,
			drugDeils: [
				{
					id: 0,
					lable: '真实姓名',
					value: '',
					placehoder: '药品使用人姓名'
				},
				{
					id: 1,
					lable: '身份证号',
					value: '',
					placehoder: '药品使用人证件号码'
				},
				{
					id: 2,
					lable: '手机号',
					value: '',
					placehoder: '用于接收购药信息，请准确填写'
				},
				{
					id: 3,
					lable: '性别',
					value: '',
					drugGender: [
						{
							value: 0,
							gender: '男',
							checked: true
						},
						{
							value: 1,
							gender: '女',
							checked: false
						}
					]
				}
			],
			drugData: {
				drugName: '',
				drugID: '',
				drugPhone: '',
				gender: ''
			},
			drugCon: ''
		};
	},
	methods: {
		focus(id) {
			// console.log(id)
			this.drugCon = id;
		},
		inputCheck(e) {
			let val = e.detail.value;
			if (!val || val == '') {
				return '';
			}

			if (this.drugCon == 0) {
				this.drugCon.invoicehead = val;
				const rule = /[^\u4E00-\u9FA5]/g;
				this.$nextTick(function() {
					this.drugData.drugName = val.replace(rule, '');
					if (this.drugData.drugName !== val) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的姓名'
						});
					} else {
						return '';
					}
				});
			} else if (this.drugCon == 1) {
				this.drugCon.drugPhone = val;
			} else if (this.drugCon == 2) {
				const rule = /^1[3456789]\d{9}$/;
				if (!rule.test(val)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					});
				} else {
					this.drugData.drugPhone = val.substring(0, 3) + '****' + val.substring(7);
					this.drugDeils[this.drugCon].value = val.substring(0, 3) + '****' + val.substring(7);
				}
			}
		},
		radioChange(e) {
			this.drugData.gender = e.detail.value;
		}
	}
};
</script>

<style lang="scss" scoped>
.edit {
	padding: 30rpx;
	.edit_box {
		padding: 14px;
	}
}
.edit_con {
	display: flex;
	align-items: center;
	.edit_key {
		width: 25%;
	}
}
/deep/ .is-input-border {
	border: none !important;
}
/deep/ .uni-easyinput__content-input {
	text-align: left;
	border: none;
	color: #c0c0c0;
}
.uni_input {
	width: 70%;
}
.radio {
	text-align: right;
}
.edit_btn{
	border-radius: 20rpx;
	position: fixed;
	width: 92%;
	bottom: 2%;
}
</style>
